<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
	
	
	
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  -->
<title>Login and Registration Form with HTML5 and CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta name="description" content="Login and Registration Form with HTML5 and CSS3" />
<meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico"> 
<link rel="stylesheet" type="text/css" href="../css/login_style.css" />
<link rel="stylesheet" type="text/css" href="../css/animate-custom.css" />

<link href="<c:url value="/css/style.css" />" rel="stylesheet" type="text/css">
<!-- <link rel="stylesheet" type="text/css" href="/style.css" /> -->
<script type="text/javascript" src="../js/boxOver.js"></script>
</head>
<body>

	<div id="main_container">

		<%@include file="../templates/header.jsp"%>

		<div id="main_content">

			<%@include file="../templates/top.jsp"%>

			<%@include file="../templates/crumb_navigation.jsp"%>

			<!-- end of menu tab -->

			<%@include file="../templates/left.jsp"%>

			<!-- end of left content -->

<%
	String regiterErrorMessage = request.getParameter("regiterErrorMessage");
	String loginErrorMessage = request.getParameter("loginErrorMessage");
%>



      <div class="center_content">
          <div class="container">
            <!-- Codrops top bar -->
            <section>				
                <div id="container_demo" >
                    <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
                    <a class="hiddenanchor" id="toregister"></a>
                    <a class="hiddenanchor" id="tologin"></a>
                    <div id="wrapper">
                        <div id="login" class="animate form">
                            <form action="login" method="POST" autocomplete="on"> 
                                <h1>Log in</h1> 
                                <%
                                	if(loginErrorMessage != null){
                                %>
                                	<p style="color: red"><%= loginErrorMessage%></p>
                                <%
                                	}
                                %>
                                <p> 
                                    <label for="username" class="uname" data-icon="u" > Your email or username </label>
                                    <input id="username" name="username" required="required" type="text" placeholder="myusername"/> <!-- or mymail@mail.com -->
                                </p>
                                <p> 
                                    <label for="password" class="youpasswd" data-icon="p"> Your password </label>
                                    <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> 
                                </p>
                                <p class="keeplogin"> 
									<input type="checkbox" name="loginkeeping" id="loginkeeping" value="true" /> 
									<label for="loginkeeping">Keep me logged in</label>
								</p>
                                <p class="login button"> 
                                    <input type="submit" value="Login" /> 
								</p>
                                <p class="change_link">
									Not a member yet ?
									<a href="#toregister" class="to_register">Join us</a>
								</p>
                            </form>
                        </div>

                        <div id="register" class="animate form">
                            <form  action="register" method="POST" autocomplete="on"> 
                                <h1> Sign up </h1> 
                                <%
                                	if(regiterErrorMessage != null){
                                %>
                                	<p style="color: red"><%= regiterErrorMessage%></p>
                                <%
                                	}
                                %>
                                <p> 
                                    <label for="usernamesignup" class="uname" data-icon="u">Your username</label>
                                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
                                </p>
                                <p> 
                                    <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
                                    <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail@mail.com"/> 
                                </p>
                                <p> 
                                    <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
                                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
                                </p>
                                <p> 
                                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>
                                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" oninput="check(value)" required="required" type="password" placeholder="eg. X8df!90EO"/>
                                </p>
                                <p class="signin button"> 
									<input type="submit" value="Sign up"/> 
								</p>
                                <p class="change_link">  
									Already a member ?
									<a href="#tologin" class="to_register"> Go and log in </a>
								</p>
                            </form>
                        </div>
						
                    </div>
                </div>  
            </section>
        </div>
	</div>
			
<script>
 function check(passConfirm) {
	 var pass = document.getElementById("passwordsignup").value;
	 if(pass != passConfirm){
		 input.setCustomValidity('aaa is not a feeling.');
	 }else{
		 input.setCustomValidity('');
	 }
 }
</script>








			<!-- end of center content -->

			<%@include file="../templates/right.jsp"%>

			<!-- end of right content -->
		</div>
		<!-- end of main content -->

		<%@include file="../templates/footer.jsp"%>

	</div>

</body>
</html>